
import React from 'react'
import ReactDOM from 'react-dom'
import * as BillAction  from '../../actions/BillAction';
import * as BillLineAction  from '../../actions/BillLineAction';
import { connect }  from 'react-redux';

import BillSettingTools from './BillSettingTools'
import BillSettingList from './BillSettingList'
import BillSettingEdit from './BillSettingEdit'
import UnitList from './UnitList'
import BillLineSettingEdit from './BillLineSettingEdit'
import BillLineRemark from './BillLineRemark'
import _ from 'lodash'

import Paging from '../Paging'

class BillSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      lineData:{},
      remark: "",
      activeLineData: {},
      remarkIsEdit: true,
      search: ""
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.BillSettingEdit))
    this.$modelUnit = $(ReactDOM.findDOMNode(this.refs.UnitList))
    this.$modelLine = $(ReactDOM.findDOMNode(this.refs.BillLineSettingEdit))
    this.$remarkModal = $(ReactDOM.findDOMNode(this.refs.BillLineRemark))
    this.props.dispatch(
      BillAction.loadBillAsync()
    )

  }

  onCreateClick() {
    this.setState({
      activeData: {}
    })
    this.$modal.modal("show")
  }

  onDataCreate(data) {

    this.props.dispatch(
      BillAction.createBillAsync(data)
    )
    this.setState({
      activeData: data
    })
    this.$modal.modal("hide");
  }

  onSelectUnitClick(){
      this.$modelUnit.modal("show");
  }

  onSelectClick(data){
    if (this.state.activeData) {
      var activeData = this.state.activeData;
      activeData.unit = data;
      activeData.unit_id = data.id
      this.setState({
        activeData: activeData
      })
    }
    this.$modelUnit.modal("hide");
  }


  onCreateBillLineClick(billId){

    this.setState({
      lineData: {
        property_bill_id: billId?billId:0
      }
    })
    this.$modelLine.modal("show");
  }


  onCreateBillLineData(data){
    var self = this;
    var activeData = this.state.activeData;
    if(this.state.activeData.id != undefined){
      this.props.dispatch(
        BillLineAction.createBillLineAsync(data)
      )
      this.props.dispatch(
        BillAction.loadBillAsync({
          offset: self.props.offset,
          limit: self.props.limit,
          unit_desc: self.state.search
        })
      )
    }else {

      if (!activeData.property_bill_lines) {
        activeData.property_bill_lines = [];
      }
      activeData.property_bill_lines.push(data)
    }

    this.setState({
      activeData: activeData
    })
    this.$modelLine.modal("hide");

  }

  onPushBillLineData(lines){
    this.props.dispatch(
      BillLineAction.setBillLinesEmty()
    )

    if (this.state.activeData) {
      // console.log("click " ,this.state.activeData)
      var activeData = this.state.activeData;

      if(activeData.property_bill_lines&&activeData.property_bill_lines.length>0){
          activeData.property_bill_lines.push(lines);
      }
      else{
        activeData.property_bill_lines  =  [];
        activeData.property_bill_lines.push(lines);
      }

      this.setState({
        activeData: activeData
      })
    }

    // console.log(this.state.activeData);
  }


  onCSVSelect(event) {

    var file = event.target.files[0];
    var name = file.name
    if (name.indexOf('csv') < 0) {
      alert("请上传.csv文件!")
      return
    }
    var data = new FormData();
    data.append('media', file)

    this.props.dispatch(
      BillAction.uploadBillAsync(data)
    )
    $(event.target).val("");
    // var target = document.getElementById('react-root');
    // showProgress(target);
  }

  onEditBillLineData(data){
    data.offset = this.props.offset;
    data.limit = this.props.limit;
    data.bill_number = this.props.bill_number;
    this.props.dispatch(
      BillLineAction.editBillLineAsync(data)
    )
    this.$modelLine.modal("hide");
  }

  onDeleteLineClick(index){
    if (index < this.state.activeData.property_bill_lines.length) {
      this.props.dispatch(
        BillLineAction.deleteBillLineDataAsync({
          id: this.state.activeData.property_bill_lines[index].id,
          offset: this.props.offset,
          limit: this.props.limit,
          unit_desc: this.state.search
        })
      )
    }

    if (this.state.activeData) {
      // console.log("click " ,this.state.activeData)
      var activeData = this.state.activeData;

      if(activeData.property_bill_lines&&activeData.property_bill_lines.length>0){
          _.remove(activeData.property_bill_lines,function(data){
            return data.id == activeData.property_bill_lines[index].id
          })
      }
      this.setState({
        activeData: activeData
      })
    }

  }

  onEditLineClick(index){
    if (index < this.state.activeData.property_bill_lines.length) {
      this.setState({
        lineData: this.state.activeData.property_bill_lines[index]
      })
      this.$modelLine.modal("show")
    }
  }

  onEditClick(index) {
    if (index < this.props.data.length) {
      this.setState({
        activeData: this.props.data[index]
      })
      this.$modal.modal("show")
    }
  }

  onBillLineRemarkShow(data) {
    console.log(data)
    if (data.is_pay) {
      this.setState({
        remark: data.remark,
        remarkIsEdit: false,
        activeLineData: data
      })
    }else {
      this.setState({
        remark: "",
        remarkIsEdit: true,
        activeLineData: data
      })
    }
    this.$remarkModal.modal("show")
  }

  onBillLinePay(data) {
    this.props.dispatch(
      BillLineAction.updatePayBillLineAsync({
        id: data.id,
        remark: data.remark,
        offset: this.props.offset,
        limit: this.props.limit,
        unit_desc: this.state.search
      })
    )
    this.setState({
      remark: "",
      remarkIsEdit: true,
      activeLineData: {}
    })
    this.$remarkModal.modal("hide")
  }

  onPushMessageClick(data) {
    var self = this;
    var confirmText = data.is_push?"该账单已经推送给业主, 确认再推送吗?":"确认推送给业主吗?";
    if (confirm(confirmText)) {
      this.props.dispatch(
        BillAction.pushBillAsync({
          offset: self.props.offset,
          limit: self.props.limit,
          unit_desc: self.state.search,
          bill_id: data.id
        })
      )
    }
  }

  onPushAll(){
    if (confirm("确认推送全部未付款账单？")) {
      this.props.dispatch(
        BillAction.pushAllBillAsync()
      )
    }
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      BillAction.loadBillAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        unit_desc: self.state.search
      })
    )
  }

  onDataSearch(text) {
    var self = this;
    this.props.dispatch(
      BillAction.loadBillAsync({
        offset: 0,
        limit: self.props.limit,
        unit_desc: text
      })
    )
    this.setState({
      search: text
    })
  }

  render() {
    var self = this;
    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body bill-content-body" >
        <BillSettingTools
          onCSVSelect = {this.onCSVSelect.bind(self)}
          onPushAll = {this.onPushAll.bind(self)}
          onCreateClick={this.onCreateClick.bind(self)}
          onDataSearch = {this.onDataSearch.bind(self)}/>
        <BillSettingList
          data = {this.props.data}
          onPushMessageClick = {this.onPushMessageClick.bind(self)}
          onEditClick = {this.onEditClick.bind(self)}/>
        <UnitList
          ref = "UnitList"
          onSelectClick = {this.onSelectClick.bind(self)}/>
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />
        <BillLineSettingEdit
          ref = "BillLineSettingEdit"
          isEdit = {this.state.lineData.id != undefined}
          data = {this.state.lineData}
          onCreateBillLineData = {this.onCreateBillLineData.bind(self)}
          onEditBillLineData = {this.onEditBillLineData.bind(self)}/>
        <BillSettingEdit
          ref = "BillSettingEdit"
          data = {this.state.activeData}
          isEdit = {this.state.activeData.id != undefined}
          onDataCreate = {this.onDataCreate.bind(self)}
          onBillLineRemarkShow = {this.onBillLineRemarkShow.bind(self)}
          onSelectUnitClick = {this.onSelectUnitClick.bind(self)}
          onCreateBillLineClick = {this.onCreateBillLineClick.bind(self)}
          onDeleteLineClick = {this.onDeleteLineClick.bind(self)}
          onEditLineClick = {this.onEditLineClick.bind(self)}
          onPushBillLineData = {this.onPushBillLineData.bind(self)}/>
        <BillLineRemark
          ref = "BillLineRemark"
          isEdit = {this.state.remarkIsEdit}
          remark = {this.state.remark}
          lineData = {this.state.activeLineData}
          onBillLinePay = {this.onBillLinePay.bind(self)}
        />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  // console.log(state.bills)
  return {
          data: state.bills.data,
          count: parseInt(state.bills.count),
          offset: parseInt(state.bills.offset),
          limit: parseInt(state.bills.limit)
         }
}

export default connect(mapStateToProps)(BillSettingBody);
